<template>
    <el-dialog
        title="提示"
        :visible.sync="visibleModal"
        width="30%"
        @close='closeHandle'
        center>
       <div class="content-box">
           <div class="box-left">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="70"></el-avatar>
           </div>
           <div class="box-right">
               <div class="title">{{contentInfo.shopName}}</div>
               <div class="line">
                   <span>体现余额</span>
                   <span>{{contentInfo.operateAmount}}</span>
               </div>
               <div class="line">
                   <span>可用余额</span>
                   <span>{{contentInfo.pcAmount}}</span>
               </div>
                <div class="line">
                   <span>交易方式</span>
                   <span>微信</span>
               </div>
             
               <div class="line">
                   <span>申请日期</span>
                   <span>{{contentInfo.createTime}}</span>
               </div>
           </div>
       </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeHandle">取 消</el-button>
            <el-button type="primary" @click="passHandle">通过</el-button>
        </span>
    </el-dialog>
</template>
<script lang="ts">

import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({
    name: 'modal'
})

export default class extends Vue {
    @Prop({default:false}) private showModal!:boolean
    @Prop({}) private modalContent:any
    // @Prop() private modalContent 
    private visibleModal: boolean = false
    private contentInfo :any = {}

    private mounted() {
       
        this.visibleModal = this.showModal
        this.contentInfo = this.modalContent
    }

    @Watch('showModal')
    onChangeModal(newV:boolean)  {
        this.visibleModal = newV
    }
    
    @Watch('modalContent',{deep:true})
    onChangeContent(newV:any) {
        this.contentInfo = newV
    }

    @Emit('closeModalHandle')
    private closeHandle() {
        this.visibleModal = false
        return this.visibleModal
    }

    @Emit('passHandle')
    private passHandle() {
        this.visibleModal = false
        let flag= {
            approveStatus : 'PASS',
            id: this.contentInfo.id
            
        }
        return flag

        
    }




}


</script>
<style lang="less" scoped>
.content-box{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    padding: 15px 0;
    
    .box-left{
        margin-right: 30px;
    }
    .title{
        color: #333;
        font-size: 22px;
        font-weight: 600;
    }
    .line{
       height: 30px;
       line-height: 30px;
       margin-top: 10px;
       span{
           &:first-child{
               color: #ababab;
               margin-right: 15px;
           }
       } 
    }

}

</style>